<template>
  <div class="table-dialog-container">
    <div class="app-container">
      <el-dialog
        title="表格展示"
        :visible.sync="this.dialogFormVisible"
        :before-close="handleClose"
      >
        <el-table :data="transExcelData" style="width: 100%" height="400">
          <el-table-column label="序号" type="index" width="50" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像" prop="staffPhoto"> </el-table-column>
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment" />
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry"> </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确定上传表格</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { importEmployee } from '@/api'
export default {
  name: 'table-dialog',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    excelData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      resetExcelData: this.excelData,
    }
  },
  computed: {
    // 将Excel数据转换 表格数组 返回 整合后的数据
    transExcelData() {
      const nameMap = {
        编号: 'id',
        密码: 'password',
        手机号: 'mobile',
        姓名: 'username',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName',
        头像地址: 'staffPhoto',
      }
      // 将每个数据的中文key 转化为英文key
      return this.resetExcelData.results.map((item) => {
        const itemObj = {} // 转换后的数据
        const oldKey = Object.keys(item)
        oldKey.forEach((key) => {
          const transKey = nameMap[key] // 取得英文key
          itemObj[transKey] = item[key] // key:英文key value:原对应中文key的value
        })
        return itemObj
      })
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:dialogFormVisible', false)
    },
    async handleConfirm() {
      const res = await importEmployee(this.transExcelData)
      this.$router.back()
      this.handleClose()
    },
  },
}
</script>

<style lang="less" scoped>
</style>
